<!--质量保修-->
<template>
  <component>
      <div class='quality-pannel'>
        <q-icon name='security' />
        3个月或5000公里质量保修
        <q-icon name='security'/>
      </div>
  </component>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent ( {
  name: 'Quality'
});
</script>

<style scoped lang='sass'>
.quality-pannel
  background-color: #f0c640
  border-radius: 0.4em
  font-size: 1.3em
  color: white
  font-weight: bold
  box-shadow: 2px 2px 5px #343434
@mixin icon($margin)
  .q-icon
    margin-left: $margin
    margin-right: $margin


//桌面页面样式
@media screen and (min-device-width: 960px)
  @include icon($margin: 3em)

//移动页面样式
@media screen and (max-device-width: 960px)
  @include icon($margin: 3em)

</style>
